(function(){
    $(".ul li").each(function(index){
        $(this).on("mouseenter",function(){
            $(".bg").eq(index).addClass("active");
        });
        $(this).on("mouseleave",function(){
            $(".bg").eq(index).removeClass("active");
        });
    });

    $(".bg").each(function(index){
        $(this).on("mouseenter",function(){
            $(".ul li").eq(index).addClass("active");
        });
        $(this).on("mouseleave",function(){
            $(".ul li").eq(index).removeClass("active");
        });
    });
    
})();